<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html><!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jquery.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

    <style>
        * {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .nav .nav-content {
            width: 750px;
            margin: 0 auto;
        }
        .nav .nav-content .nav-item .logo-content img{
            width: 222px;
            height: 114px;
            position: absolute;
            left: -106px;
            top: -12px;
        }
        .nav .nav-content .nav-item .logo-content{
            width: 100px;
            height: 85px;
            overflow: hidden;
            position: relative;
        }
        @font-face{
            font-family: QS-B;
            src:url(/font/Quicksand-Bold.ttf);
        }
        @font-face{
            font-family: QS-R;
            src:url(/font/Quicksand-Regular.ttf);
        }

        @font-face{
            font-family: QS-M;
            src:url(/font/Quicksand-Medium.ttf);
        }

        .nav .nav-content .nav-list {
            width: 750px;
            height: 85px;
            display: flex;
            align-items:center;
            justify-content :space-between;
            /* background-color: #F5F5F5; */

        }

        .nav .nav-content .nav-item {
            font-family: QS-M;
            font-size: 24px;
            /* float: left; */

        }

        .nav .nav-content .nav-item:hover {
            cursor: pointer;
            color: blue;
        }

        .choseed-btn {
            color: blue;
        }

    </style>



    <style>
        .main {
            width: 700px;
            margin: 0 auto;
            height: 300px;
        }
        .table-title {
            font-size: 20px;
            font-family: QS-B;
        }
        .control-style {
            width: 35%;
            border: 1px #ccc;
            font-family: QS-B;
            font-size: 18px;
        }
        .userInfo {
            font-family: QS-B;
            font-size: 18px;
        }
        .button {
            width:126px;
            height:30px;
            color:white;
            background-color:#004aad;
            border:none;
            border-radius:8px;
            font-family:QS-M;
            font-size: 20px;
        }
        .btn-bar {
            margin-top: 20px;
            margin-left: 444px;
        }
        .table {
            margin-top: 25px;
            margin-bottom: 0;
        }
    </style>
</head>
<body >
<div class="nav">
    <div class="nav-content">
        <ul class="nav-list">
            <li class="nav-item">
                <div class="logo-content">
                    <img src="/image/LOGO.png" alt="">
                </div>
            </li>
            <li class="nav-item">
                <a style="color: black" href="/courseBordTeacher">Course board</a>
            </li>

            <li class="nav-item">
                <a href="/courseBordTeacher/crades">GradesMarking</a>
            </li>
            <li class="nav-item">
                <a style="color: black" href="/drive">Drive</a></li>
            <li class="nav-item">
                <a href="/accountInfo">
                    <svg  t="1639982246046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8917" width="48" height="48"><path style="fill: #004add" d="M619.064182 504.57971c91.163561-42.401656 154.766046-133.565217 154.766046-239.569358C773.830228 118.724638 655.10559 0 508.819876 0S243.809524 118.724638 243.809524 265.010352c0 106.004141 63.602484 197.167702 154.766045 239.569358C169.606625 555.461698 0 758.989648 0 1002.799172v21.200828h1017.639752v-21.200828c0-243.809524-169.606625-447.337474-398.57557-498.219462z" p-id="8918" fill="#1296db"></path></svg>
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="main">
    <div th:switch="${itemType}" class="title">
        <h1 th:case="'TEST'" style="font-family: QS-M" th:text="|${courseId} G${courseGroup} Test:${topicItem.itemTitle}|">SSK3313 G4 Test1</h1>
        <h1 th:case="'TASK'" style="font-family: QS-M" th:text="|${courseId} G${courseGroup} Task:${topicItem.itemTitle}|">SSK3313 G4 Test1</h1>
    </div>
    <div class="split-line" style="border:3px #004aad solid;margin-top: 25px;"></div>

    <div th:switch="${itemType}">
        <div th:case="'TEST'" class="table">
            <div class="row table-title">
                <div class="col-md-8">Metric No</div>
                <div class="col-md-4">Marks</div>
            </div>
            <div class="row info-item" th:each="info:${list}">

                <input type="hidden" class="topicId" th:value="${topicItem.topicId}">
                <input type="hidden" class="itemId" th:value="${topicItem.itemId}">
                <input type="hidden" class="courseId" th:value="${courseId}">
                <input type="hidden" class="userId" th:value="${info.user.userId}">
                <input type="hidden" class="uniId" th:value="${uniId}">
                <input type="hidden" class="courseGroup" th:value="${courseGroup}">

                <div class="col-md-8 userInfo" th:text="${info.user.userId}">123456</div>
                <div class="col-md-4">
                    <input  type="text" name="grade" class="form-control control-style grade" th:value="${info.grade}">
                </div>
            </div>

        </div>

        <div th:case="'TASK'" class="table">
            <div class="row table-title">
                <div class="col-md-4">Metric No</div>
                <div class="col-md-4">Status</div>
                <div class="col-md-4">Marks</div>
            </div>
            <div class="row info-item" th:each="info:${list}">
                <input type="hidden" class="topicId" th:value="${topicItem.topicId}">
                <input type="hidden" class="itemId" th:value="${topicItem.itemId}">
                <input type="hidden" class="courseId" th:value="${courseId}">
                <input type="hidden" class="userId" th:value="${info.user.userId}">
                <input type="hidden" class="uniId" th:value="${uniId}">
                <input type="hidden" class="courseGroup" th:value="${courseGroup}">
                <div class="col-md-4 userInfo" th:text="${info.user.userId}">123456</div>
                <div class="col-md-4" th:switch="${info.user.flag}">
                    <a th:case="'Submitted'"  th:href="@{/grade/{userId}/{uniId}/{courseId}/{courseGroup}/{topicId}/{itemId}(userId=${info.user.userId},topicId=${topicItem.topicId},uniId=${uniId},courseId=${courseId},courseGroup=${courseGroup},itemId=${topicItem.itemId})}">Submitted</a>
                    <span th:case="'UnSubmitted'">UnSubmitted</span>
                    <span th:case="'Late'">Late</span>
                </div>
                <div class="col-md-4 garde-bar">
                    <input  type="text" name="grade" class="form-control control-style grade" th:value="${info.grade}">
                </div>

            </div>
        </div>
    </div>

    <div class="split-line" style="border:3px #004aad solid;"></div>
    <div class="btn-bar">
        <a th:href="@{/gradesInfo/{uniId}/{courseId}/{courseGroup}(uniId=${uniId},courseId=${courseId},courseGroup=${courseGroup})}"><input style="line-height: 10px;" type="button" id="back" class="button back" Value="Back"></a>
        <input style="line-height: 10px;"  type="button" id="save" class="button next" Value="Save">
    </div>

    <script th:inline="javascript">
        $("#save").click(function () {
            let arr = new Array();
            $(".info-item").each((index,data)=>{
                if ($(data).find("input.grade").val()===''){
                    alert("请输入数字!")
                    return;
                }

               let gradeObj={
                   "topicId":$(data).children("input.topicId").val(),
                   "uniId":$(data).children("input.uniId").val(),
                   "itemId": $(data).children("input.itemId").val(),
                   "courseId":$(data).children("input.courseId").val(),
                   "userId":$(data).children("input.userId").val(),
                   "courseGroup":$(data).children("input.courseGroup").val(),
                   "grade": $(data).find("input.grade").val(),
               }
               arr.push(gradeObj);
            })
            console.log(arr)

            $.ajax({
                url:"/grade/updateGrade",
                contentType:"application/json;charset=UTF-8",
                dataType: "JSON",
                data:JSON.stringify(arr),
                method:"POST",
                success:function (data) {
                    if (data.code===true){
                        document.location.reload()
                    }
                }
            })
        })
    </script>
</div>

